<template>
	<view class="today">
		<view class="pageHeader dFlex jStart_aCenter" :style="{'height': pageHeader + 'px','padding-top': pageStatus + 'px'}">
			<view class="backIcon imgPublic" @tap.stop='back'>
				<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/back3.png" mode="widthFix"></image>
			</view>
			<view class="title"></view>
			<view class="backIcon imgPublic">
				<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/backIcon2.png" mode='widthFix'></image>
			</view>
		</view>
		<!-- <view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view :class="['pageTitle','dFlex','jBetween_aCenter']">
				<view class="backIcon imgPublic" @tap.stop='back'>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/back3.png" mode="widthFix"></image>
				</view>
				<view class="title"></view>
				<view class="backIcon imgPublic">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/backIcon2.png" mode='widthFix'></image>
				</view>
			</view>
		</view> -->
		<view class="content">
			<view class="advImg imgPublic">
				<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/today.png" mode="widthFix"></image>
			</view>
			<view class="container">
				<view class="list" v-if='list.length'>
					<view :class="['shopOne','dFlex','jStart_aStart']" v-for="(item,index) in list" :key='index' @tap="lookDetail(item)">
						<view class="shopImg imgPublic">
							<image :src="item.main_img"></image>
							<view class='yjCount dFlex jAround_aCenter' v-if='user.auth_status == "2"'>
								<view class='showYJ'>佣</view>
								<text>{{(parseFloat(item.min_price) * parseFloat(item.service_rate) / 100).toFixed(2)}}</text>
							</view>
						</view>
						<view class="shopInfo">
							<view class="shopName">{{item.title}}</view>
							<view class="sale dFlex jStart_aCenter">
								<text>已抢{{item.salenum}}件</text>
								<view class="have">剩{{item.stock - item.salenum > 0 ? item.stock - item.salenum : 0}}件</view>
							</view>
							<view class="config">
								<view class="priceTag dFlex jStart_aCenter">
									<view class="miaosha">到手价</view>
									<view class="jiang">已降{{parseFloat((item.old_price - item.min_price).toFixed(2))}}元</view>
								</view>
								<view class="tools dFlex jBetween_aEnd">
									<view class="showPrice">￥<text>{{item.min_price}}</text></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="list empty imgPublic" v-else>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default { 
		data() {
			return {
				pageHeader:getApp().globalData.pageHeader,
				pageStatus:getApp().globalData.pageStatus,
				device:getApp().globalData.platform,
				user:{auth_status:'-1'},
				//  提货地址
				list:[],
				page:1,
				load:false,
			};
		},
		onLoad() {
			this.initList();
			if(getApp().globalData.isLogin){
				this.initUser();
			}
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page++;
				this.initList();
			}
		},
		methods:{
			initUser(){
				this.tool.getData('/api/user/info',{},'',this).then(res=>{
					if(res){
						this.user = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 列表
			initList(){
				this.tool.getData('/api/mall/getGoodsList',{
					page:this.page,
					orderby:'price',
					ordertype:'asc'
				}).then(res=>{
					if(res){
						this.list = this.page == 1?res:this.list.concat(res);
						this.load = res.length>=10?true:false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 商品详情
			lookDetail(line){
				uni.navigateTo({
					url:'/seller/shopDetail?id='+line.id,
				})
			},
			// 返回
			back(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss">
	.today{
		width: 100%;
		.content{
			width: 100%;
			.container{
				width: 100%;
				// padding: 36rpx 24rpx;
				padding: 0 24rpx 36rpx;
				box-sizing: border-box;
				border-radius: 40rpx 40rpx 0 0;
				background: white;
				position: relative;
				top: -20rpx;
				.list{
					width: 100%;
					box-sizing: border-box;
					.shopOne{
						width: 100%;
						padding-top: 36rpx;
						.shopInfo{
							flex: 1;
							// padding-bottom: 26rpx;
							.config{
								width: 100%;
								.priceTag{
									width: 100%;
									font-size: 12px;
									margin-bottom: 6rpx;
									.miaosha{
										width: max-content;
										background: linear-gradient(180deg, #FF6200 0%, #FE3140 100%);
										color: white;
										border: 1px solid #FF6200;
									}
									.jiang{
										color: #FF6200;
										border: 1px solid #FF6200;
									}
									view{
										padding: 0 8px;
										line-height: 36rpx;
										border-radius: 8rpx;
										margin-right:4rpx;
									}
								}
								.tools{
									width: 100%;
									.count{
										width:auto;
										.smallIpt{
											width:54rpx;
											height:54rpx;
											margin:0 12rpx;
											input{
												width:54rpx;
												height:54rpx;
												text-align:center;
												line-height:54rpx;
											}
										}
										.smallBtn{
											width:54rpx;
											height:54rpx;
											image{
												width:54rpx;
												height:54rpx;
											}
										}
									}
									.showPrice{
										color: #FF6200;
										font-size: 12px;
										text{
											font-size: 20px;
											font-weight: bold;
										}
									}
								}
							}
							.sale{
								margin: 12rpx 0 42rpx;
								font-size: 12px;
								color: #666666;
								.have{
									color: #FF5000;
									margin-left: 24rpx;
								}
							}
							.shopName{
								width: 100%;
								font-size: 15px;
								font-weight: bold;
								line-height: 20px;
								margin-bottom: 18rpx;
							}
						}
						.shopImg{
							width: 254rpx;
							height: 254rpx;
							border-radius: 4px;
							margin-right: 16rpx;
							overflow: hidden;
							position: relative;
							image{
								width: 254rpx;
								height: 254rpx;
							}
						}
					}
					.shopOne:last-child{
						margin-bottom: 0;
					}
				}
			}
			.advImg{
				width: 100%;
			}
		}
	}
	.pageHeader{
		position: fixed;
		top:0;
		left:12px;
	}
</style>
